<template>
	<div class="ranking-list table-theme" v-if="filiale_id != 2">
		<el-card>
			<div class="ranking-title">{{title}}产品销售排行榜</div>
			<div class="date-search">
				<div class="start_time">
					开始日期：
						<el-date-picker type="date" placeholder="选择开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="start_time" style="width: 70%;" @change="init(1)"></el-date-picker>
				</div>
				<div class="end_time">
					结束日期：
					<el-date-picker type="date" placeholder="选择结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="end_time" style="width: 70%;" @change="init(1)"></el-date-picker>
				</div>
				<search-view :option="searchOption" @value="goSearch" @clear="refreshPage" ></search-view>
			</div>
			<div class="top-menu">
				<div class="menu-left">
					<div class="type-view">
						<div class="client-item" v-for="(item, index) in timeList" @click="timeSelect(item.value,item.label)" :key="item.index"
						 :class="[time == item.value ? 'client-item-active' : '']">
							{{ item.label }}
						</div>
					</div>
				</div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
				</div>
			</div>
			<p class="data-number">数据总数：{{ total }}</p>
			<el-table :data="wList">
				<el-table-column label="排名" align="center" prop="">
					<template slot-scope="scope">
						<el-tag>{{ scope.$index+1 }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="订单ID" align="center" prop="order_id"></el-table-column>
				<el-table-column label="商品ID" align="center" prop="goods_id"></el-table-column>
				<el-table-column label="商品名" align="center" prop="goods_name"></el-table-column>
				<el-table-column label="商品编号" align="center" prop="goods_sn"></el-table-column>
				<el-table-column label="SKU编号" align="center" prop="sku_sn"></el-table-column>
				<el-table-column label="主图" align="center" prop="">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.image_middle"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="累计销量" align="center" prop="count"></el-table-column>
				<el-table-column label="售价" align="center" prop="">
					<template slot-scope="scope">
						<p>¥ {{scope.row.goods_self_price}}</p>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="200">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="goGoodsDetails(scope.row.goods_id)">查看商品</el-button>
						<el-button type="primary" size="mini" @click="goOrderDetails(scope.row.order_id)">查看订单</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :page-size="30" :total="total" @current-change="init"
				 :current-page="page"></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	import ImgPopover from '@/components/ImgPopover';
	import spreadUser from './spread_user.vue';
	import sonMixin from '@/utils/sonMixin';
	export default {
		components: {
			ImgPopover
		},
		mixins:[sonMixin],
		data() {
			return {
				admin_type: localStorage.getItem('admin_type'),
				title: '全部',
				time: 0,
				timeList: [{
						value: 0,
						label: '全部'
					}, {
						value: 'today',
						label: '本日'
					},
					{
						value: 'yesterday',
						label: '昨日'
					},
					{
						value: 'week',
						label: '本周'
					},
					{
						value: 'lastWeek',
						label: '上周'
					},
					{
						value: 'month',
						label: '本月'
					},
					{
						value: 'lastMonth',
						label: '上个月'
					},
					{
						value: 'year',
						label: '今年'
					},
					{
						value: 'lastYear',
						label: '上一年'
					}
				],
				wList: [],
				total: 0,
				totalData: 0,
				page: 0,
				filiale_id:1,
				start_time: '',
				end_time: '',
				factory_id: '',
      	factory_sn: '',
				searchOption: [
					{
						value: 0,
						label: "工厂ID",
					},
					{
						value: 1,
						label: "工厂编号",
					},
				],
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 30,
					time: this.time == 0 ? '' : this.time,
					start_time: this.start_time,
					end_time: this.start_time,
					factory_id: this.factory_id,
        	factory_sn: this.factory_sn,
				};

				if (this.admin_type != 1 && !this.is_subsidiary_corporation) {
					data.store_id = localStorage.getItem('store_id')
				}
				if(this.is_subsidiary_corporation){
					data.filiale_id = localStorage.getItem('filiale_id')
				}
				this.$http(this.$ApiList.GoodsRank, data).then(res => {
					this.wList = res.datas;
					this.total = res.count
				});
			},
			// 刷新
			refreshPage() {
				this.page = 1;
				this.factory_id = ''
      	this.factory_sn = ''
				this.init();
			},
			timeSelect(time, title) {
				this.time = time
				this.title = title
				this.init();
			},
			goGoodsDetails(goods_id) {
				this.$router.push({
					path: '/goods_details',
					query: {
						type: 1,
						id: goods_id
					}
				});
			},
			goOrderDetails(id) {
				this.$router.push({
					path: '/order_details',
					query: {
						id: id
					}
				});
			},
			goSearch(index, content) {
				this.factory_id = ''
				this.factory_sn = ''
				switch (index){
					case 0:
						this.factory_id = content
						break;
					case 1:
						this.factory_sn = content
						break;
				}
				this.init();
			},
		},
		created() {
			this.init();
			this.filiale_id = localStorage.getItem('filiale_id')
		}
	};
</script>
<style lang="scss" scoped>
	.ranking-list {
		.date-search{
			padding: 20px 0;
			display: flex;
		}
		.date-search .start_time,
		.date-search .end_time{
			margin-right: 20px;
			width: 340px;
		}
		.data-filtering-left {
			display: flex;
		}

		.ranking-title {
			font-size: 26px;
			font-weight: bold;
		}
		.type-view {
			display: flex;
		}

		.type-view .client-item {
			margin-right: 40px;
			line-height: 40px;
			color: rgba(153, 153, 153, 1);
			cursor: pointer;
		}

		.client-item-active {
			color: #333333 !important;
			border-bottom: 4px solid #34a1e0;
		}
	}
</style>
